<template>
  <el-popover :visible="visible" placement="top" trigger="click" :width="180">
    <div v-if="type == 1">
      <el-input v-if="inputType == 2" v-model="quantity" oninput="value=value.replace(/[^\d.]/g, '').replace(/(\.\d{3}).+/, '$1').replace(/(\.\d{2})\d+/, '$1')"
        :placeholder="props.placeholder" />
      <el-input v-else v-model="quantity" oninput="value = value.replace(/[^0-9]/g, '')"
        :placeholder="props.placeholder" />
    </div>
    <div class="flex" v-if="type == 3">
      <template v-if="inputType == 2">
        <el-input class="mr-1" v-model="group.length" oninput="value=value.replace(/[^\d.]/g, '').replace(/(\.\d{3}).+/, '$1').replace(/(\.\d{2})\d+/, '$1')" placeholder="长" />
        <el-input class="mr-1" v-model="group.width" oninput="value=value.replace(/[^\d.]/g, '').replace(/(\.\d{3}).+/, '$1').replace(/(\.\d{2})\d+/, '$1')" placeholder="宽" />
        <el-input v-model="group.height" oninput="value=value.replace(/[^\d.]/g, '').replace(/(\.\d{3}).+/, '$1').replace(/(\.\d{2})\d+/, '$1')" placeholder="高" />
      </template>
      <template v-else>
        <el-input class="mr-1" v-model="group.length" oninput="value=value.replace(/[^0-9]/g,'')" placeholder="长" />
        <el-input class="mr-1" v-model="group.width" oninput="value=value.replace(/[^0-9]/g,'')" placeholder="宽" />
        <el-input v-model="group.height" oninput="value=value.replace(/[^0-9]/g,'')" placeholder="高" />
      </template>
    </div>
    <div style="text-align: right; margin-top: 4px">
      <el-button size="small" text @click="visible = false">取消</el-button>
      <el-button size="small" type="primary" @click="handleBatch">确定</el-button>
    </div>
    <template #reference>
      <el-button type="primary" link @click="visible = true">批量</el-button>
    </template>
  </el-popover>
</template>
<script setup>
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus';
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => { }
  },
  placeholder: {
    type: String,
    default: "输入"
  },
  type: {
    type: [String, Number],
    default: 1      // 1 单输入框 3 长宽高
  },
  inputType: {
    type: Number,
    default: 2     // 1 只能数字 2 输入小数
  },
})

const emit = defineEmits(['batch'])
const data = reactive({
  visible: false,
  quantity: '',
  group: {
    length: '',
    width: '',
    height: ''
  }
})


const { visible, quantity, group } = toRefs(data)

const handleBatch = () => {
  if (props.type == 1) {
    if(!quantity.value){
      ElMessage.error('数据不能为空')
      return
    }
    emit('batch', quantity.value)
  } else if (props.type == 3) {
    if(!group.value.length){
      ElMessage.error('长不能为空')
      return
    }
    if(!group.value.width){
      ElMessage.error('宽不能为空')
      return
    }
    if(!group.value.height){
      ElMessage.error('高不能为空')
      return
    }
    emit('batch', group.value)
  }
  close()
}

const close = () => {
  quantity.value = ''
  group.value = {
    length: '',
    width: '',
    height: ''
  }
  visible.value = false
}
</script>